<template>
	<view class="orderList">
		<view class="top">
			<view class="" @tap="handeTop(item)" :class="data.obj.orderState == item.id?'active':''"
				v-for="(item,index) in data.topArr" :key="index">
				<text>{{item.n}}</text>
			</view>
		</view>
		<scroll-view :refresher-triggered="data.refresherBool" :refresher-enabled="true"
			@refresherrefresh="refresherrefresh" @scrolltolower="scrolltolower" scroll-y="true">
			<view v-for="(item,index) in data.result.list" :key="index" class="listItem"
				@tap.stop="navTo('/pages/orderDetails/index?id='+item.sonOrderNo)">
				<view class="top">
					订单编号:{{item.sonOrderNo}}
					<text v-if="item.orderState?.value=='COMPLETE'">{{item.settleState?.name}}</text>
					<text :style="'color:'+item.color+';'">{{item.orderState.sellerDisName}}</text>
				</view>
				<view class="center" v-for="(item1,index1) in item.productDTOS" :key="index1">
					<view class="img">
						<image v-if="item1.productPicture"
							:src="data.httpUrl+'/app/file/viewFile?fileId='+item1.productPicture" mode="aspectFill">
						</image>
					</view>
					<view class="right">
						<view class="">
							<text class="ellipsis_2">{{item1.productName}}</text>
							× {{item1.num}}
						</view>
						{{item1.specName}}；{{item1.specValue}}
						<view class="attr">
							<text v-for="(item2,index2) in item1.attrs"
								:key="index2">{{item2.propertyName}}：{{item2.propertyValue}};</text>
						</view>
					</view>
				</view>
				<view class="sk">
					实付款
					<text>￥{{item.totalPayAmount}}</text>
				</view>
				<view class="bot" v-if="item.orderState.value != 'CANCEL' && item.orderState.value != 'REFUND'"
					:class="item.orderState.value">
					<text v-if="changeBot(item.orderState.value,item)"
						@tap.stop="handeClick(item,index)">{{changeBot(item.orderState.value,item)}}</text>
				</view>
			</view>

		</scroll-view>
	</view>
</template>

<script lang="ts" setup>
	import {
		reactive,
	} from 'vue';
	import { sellerOrderPage } from '@/utils/api/goods'
	import { verifyOrder } from '@/utils/api/shop'
	import { onLoad } from '@dcloudio/uni-app'
	const data = reactive<any>({
		topArr: [{ n: '全部', id: '' }, { n: '待付款', id: 'WAIT_PAY' }, { n: '待发货', id: 'WAIT_SEND' }, { n: '已发货', id: 'WAIT_RECEIVE' }, { n: '已完成', id: 'COMPLETE' }],
		index: 0,
		obj: { pageNo: 1, pageSize: 10, orderState: '' },
		result: { list: [] },
		httpUrl: getApp().globalData.baseUrl,
	})

	uni.$off('orderList');
	uni.$on('orderList', (id) => {
		data.result.list.map((item, index) => {
			if (item.sonOrderNo == id) {
				if (data.obj.orderState) {
					data.result.list.splice(index, 1)
				} else {
					item.orderState.value = 'WAIT_RECEIVE';
					item.orderState.sellerDisName = '已发货';
				}

			}
		})
	})
	const refresherrefresh = () => {
		data.refresherBool = true;
		data.obj.pageNo = 1;
		requstList()
	}
	const handeTop = (item) => {
		if (item.id == data.obj.orderState) return;
		data.obj.orderState = item.id;
		data.obj.pageNo = 1;
		requstList()
	}
	const handeClick = (item, index) => {
		const { value } = item.orderState;
		const {sendType} = item.sendType;
		console.log('sendType',sendType)
		if (value == 'WAIT_PAY') {
			//提醒付款
			uni.showLoading({
				title: '加载中...',
				mask: true
			})
			setTimeout(() => {
				uni.showToast({
					title: '操作成功!',
					icon: 'none'
				})
			}, 1000)
		} else if (value == 'WAIT_SEND') {
			uni.showActionSheet({
				itemList: ['发货', '扫码核销'],
				success: (e) => {
					if (e.tapIndex == 0) {
						//发货
						navTo('/pages/sendOutGoods/index?id=' + item.sonOrderNo)
					}
					if (e.tapIndex == 1) {
						//发货
						uni.scanCode({
							success: function (res) {
								const codeData = res.result
								const jsonData = JSON.parse(codeData)
								const dataType = jsonData?.dataType
								const dataCode = jsonData?.dataCode;
								if (dataType == 'verifyProduct') {
									verifyOrder({ data: { verifyCode: dataCode } }).then((res) => {
										if (res.code == 200) {
											uni.showToast({
												title: '核销成功！',
												icon: 'none'
											})
											if (!data.obj.orderState) {
												item.orderState.sellerDisName = '已完成'
												item.color = '#BFBFBF';
												item.orderState.value = 'COMPLETE'
											} else {
												data.result.list.splice(index, 1)
											}

										}
									})
								}

							}
						});
					}
				}
			})

		} else if (value == 'WAIT_RECEIVE') {
			//已发货
			navTo('/pages/logistics/index?id=' + item.sonOrderNo + '&isMj=1')
		} else {
			//查看评价
			navTo('/pages/evaluationManagement/index?id=' + item.sonOrderNo)
		}
	}
	const requstList = () => {
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		if (data.obj.pageNo == 1) {
			data.result.list = [];
		}
		sellerOrderPage({ data: data.obj }).then((res) => {
			res.data.list.map((item) => {
				if (item.orderState.value == 'CANCEL' || item.orderState.value == 'COMPLETE') {
					item.color = '#BFBFBF'
				} else if (item.orderState.value == 'WAIT_RECEIVE' || item.orderState.value == 'WAIT_PAY') {
					item.color = '#FF8C00'
				} else {
					item.color = '#FF263F'
				}

			})
			res.data.list = [...data.result.list, ...res.data.list];
			data.result = res.data;
			data.refresherBool = false;
			uni.hideLoading()
		})
	}
	const changeBot = (type, item) => {
		if (type == 'COMPLETE') {
			return '查看评价'
		} else if (type == 'WAIT_RECEIVE') {
			return '查看物流'
		} else if (type == 'WAIT_PAY') {
			return '提醒付款'
		} else {
			return '去发货';
		}
	}
	const scrolltolower = () => {
		if (data.result.total != data.result.list.length) {
			data.obj.pageNo += 1;
			requstList()
		}
	}
	const navTo = (url : string) => {
		uni.navigateTo({
			url
		})
	}
	requstList()
</script>

<style scoped lang="scss">
	.attr {

		text {
			font-size: 24rpx;
			color: #8C8C8C;
			display: inline-block;
			margin-right: 10rpx;
			margin: 0 !important;
		}
	}

	.orderList {
		flex: 1;
		height: 0;
		background: #F4F6FA;
		display: flex;
		flex-direction: column;

		>.top {
			white-space: nowrap;
			overflow: auto;
			width: 100%;
			background: #fff;
			display: flex;
			justify-content: space-between;
			padding: 20rpx 30rpx 0 30rpx;

			view {
				&::after {
					content: '';
					display: block;
					width: 40rpx;
					height: 4rpx;
					border-radius: 4rpx;
					// background: ;
					margin: 10rpx auto 0 auto;
				}

				text {
					color: #595959;
				}

				display: inline-block;
				padding: 0 24rpx;

			}

			.active {
				&::after {

					background: #6B64D3;
				}

				text {
					color: #6B64D3;
				}
			}
		}

	}

	scroll-view {
		flex: 1;
		overflow: auto;
	}

	.listItem {
		width: 720rpx;
		padding: 24rpx;
		border-radius: 24rpx;
		background: #fff;
		margin: 0 auto;
		margin-top: 24rpx;

		>.bot {
			display: flex;
			justify-content: flex-end;
			margin-top: 24rpx;

			text {
				padding: 11rpx 24rpx;
				border-radius: 50rpx;
				color: #6B64D3;
				border: 2rpx solid #6B64D3;
			}
		}

		>.top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #262626;
		}

		>.center {
			margin: 24rpx 0 16rpx 0;
			display: flex;
			align-items: center;

			.img {
				width: 160rpx;
				height: 160rpx;
				border-radius: 24rpx;
				background: #ccc;
				margin-right: 24rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 24rpx;
				}
			}

			.right {
				flex: 1;
				width: 0;
				color: #8C8C8C;
				font-size: 24rpx;

				>view:nth-of-type(1) {
					display: flex;
					margin-bottom: 10rpx;
					color: #8C8C8C;
					font-size: 24rpx;

					text {
						flex: 1;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: normal;
						margin-right: 24rpx;
					}
				}
			}
		}

		.sk {
			display: flex;
			justify-content: flex-end;
			color: #262626;
			font-size: 24rpx;
			align-items: center;

			text {
				color: #6B64D3;
				font-size: 36rpx;
			}
		}





	}
</style>